<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useDict } from '@/composables/useDict'
import { useDictStore } from '@/store/dict'

import materialsNeeded from '@/assets/athlete/management/materialsNeeded.svg?url'
import pendingApplications from '@/assets/athlete/management/pendingApplications.svg?url'
import monthlyApproved from '@/assets/athlete/management/monthlyApproved.svg?url'
import processedToday from '@/assets/athlete/management/processedToday.svg?url'

// 导入所有 Tab 组件
import FirstRegistrationTab from './components/FirstRegistrationTab.vue'
import YearlyConfirmTab from './components/YearlyConfirmTab.vue'
import YearlyConfirmConfigTab from './components/YearlyConfirmConfigTab.vue'
import PublicityManagementTab from './components/PublicityManagementTab.vue'
import OperationLogTab from './components/OperationLogTab.vue'

// 统计数据
const statistics = ref({
	pendingApplications: 48,
	todayProcessed: 28,
	monthApproved: 156,
	materialsRejected: 77
})

// 统计卡片配置
const statisticCards = ref([
	{
		icon: materialsNeeded,
		label: '待审核申请',
		value: () => statistics.value.pendingApplications
	},
	{
		icon: processedToday,
		label: '今日处理',
		value: () => statistics.value.todayProcessed
	},
	{
		icon: monthlyApproved,
		label: '本月通过',
		value: () => statistics.value.monthApproved
	},
	{
		icon: pendingApplications,
		label: '待补充材料',
		value: () => statistics.value.materialsRejected
	}
])

// Tab 配置
const tabs = [
	{
		key: 'FirstRegistrationTab',
		label: '首次注册',
		component: FirstRegistrationTab
	},
	{
		key: 'YearlyConfirmTab',
		label: '年度确认',
		component: YearlyConfirmTab
	},
	{
		key: 'YearlyConfirmConfigTab',
		label: '年度确认配置',
		component: YearlyConfirmConfigTab
	},
	{
		key: 'PublicityManagementTab',
		label: '公示管理',
		component: PublicityManagementTab
	},
	{
		key: 'OperationLogTab',
		label: '操作日志',
		component: OperationLogTab
	}
]

// 当前激活的 tab key
const activeTabKey = ref('FirstRegistrationTab')

// 当前显示的组件
const currentComponent = computed(() => {
	const tab = tabs.find(t => t.key === activeTabKey.value)
	return tab ? tab.component : FirstRegistrationTab
})

// 切换 Tab
const handleTabClick = (key: string) => {
	activeTabKey.value = key
}

// ========== 字典预加载 ==========
const dictStore = useDictStore()

/**
 * 预加载所有子组件可能使用的字典
 *
 * 优势：
 * 1. 在父组件挂载时统一加载，子组件切换时无需等待
 * 2. 避免多个子组件重复请求相同字典
 * 3. 提升用户体验，减少加载时间
 *
 * 字典列表说明：
 * - sys_audit_status: 审核状态（首次注册Tab使用）
 * - sys_user_sex: 性别（多个Tab可能使用）
 * - athlete_level: 运动员等级（详情相关功能使用）
 * - org_type: 组织类型（注册单位、在训单位相关）
 */
</script>

<template>
	<div class="h-full flex-col flex bg-secondary">
		<!-- 顶部统计卡片 -->
		<div class="grid grid-cols-4 gap-5 mb-5">
			<div
				v-for="(card, index) in statisticCards"
				:key="index"
				class="bg-primary rounded-lg px-7 py-6 flex items-center gap-5"
			>
				<img
					:src="card.icon"
					class="size-[54px]"
				/>
				<div class="flex-1">
					<div class="text-sm text-secondary mb-1">{{ card.label }}</div>
					<div class="text-2xl text-primary font-600">{{ card.value() }}</div>
				</div>
			</div>
		</div>

		<!-- 主内容区 -->
		<div class="bg-primary flex-1 flex flex-col min-h-0">
			<!-- 标签页 -->
			<div class="mx-5 pt-4 border-b border-background-tertiary">
				<div class="flex gap-8">
					<div
						v-for="tab in tabs"
						:key="tab.key"
						:class="[
							'pb-3 cursor-pointer text-sm transition-colors relative',
							activeTabKey === tab.key ? 'text-brand font-medium border-b-2 border-brand' : 'text-secondary'
						]"
						@click="handleTabClick(tab.key)"
					>
						{{ tab.label }}
						<div
							v-if="activeTabKey === tab.key"
							class="absolute bottom-0 left-0 right-0 h-0.5 bg-primary"
						/>
					</div>
				</div>
			</div>

			<!-- Tab 内容区 -->
			<div class="flex-1 flex flex-col min-h-0">
				<keep-alive>
					<Transition
						name="fade-slide"
						mode="out-in"
					>
						<component :is="currentComponent" />
					</Transition>
				</keep-alive>
			</div>
		</div>
	</div>
</template>

<style scoped>
/* 淡入淡出 + 滑动动画 */
.fade-slide-enter-active {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-slide-leave-active {
	transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
}
.fade-slide-enter-from {
	opacity: 0;
	transform: translateX(20px);
}
.fade-slide-leave-to {
	opacity: 0;
	transform: translateX(-20px);
}
</style>
